import { Space, Card, Tooltip, Popconfirm, message, Descriptions } from "antd";
import { Button } from "@douyinfe/semi-ui";
import { IconDelete, IconGlobeStroke, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import { format } from "timeago.js";

import useVersionOnline from "../../hooks/application/organization/useVersionOnline";

import EditApplicationTypeVersionDescriptionForm from "../organization_application/VersionDesc";

const OrganizationApplications = ({ applications, loadWaitOnlineApplications }) => {
    const { remoteData, BNTApplicationOperationCenterUrls, runEnv } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalStyle, setModalComponent } = useModel("global.modal");

    const { submitLoading, setSubmitLoading, handleVersionOnline } = useVersionOnline();

    const state = useReactive({
        submitLoading: false,
    });

    const editApplicationTypeVerionDesc = async (item) => {
        setModalTitle("编辑应用产品信息");
        setModalStyle({ top: 100 });
        setModalWidth(600);
        setModalComponent(<EditApplicationTypeVersionDescriptionForm version={item} reloadData={loadWaitOnlineApplications} />);
        setModalVisible(true);
    };

    const deleteApplicationTypeVersion = async (item, version) => {
        state.submitLoading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/application/deleteVersion",
            params: {
                appUuid: item.appUuid,
                apvPubtime: version.apvPubtime,
            },
        });
        if (res) {
            message.success("成功删除应用客户端版本");
            loadWaitOnlineApplications();
        }
        state.submitLoading = false;
    };

    const submitVersionOnline = (operatorCenter, application, clientVersion) => {
        if (!clientVersion.apvDesc) {
            message.warning("没有版本更新说明，请添写");
            setSubmitLoading(false);
            return editApplicationTypeVerionDesc(clientVersion);
        }
        const clientType = clientVersion.ApplicationType;
        handleVersionOnline(operatorCenter, application, clientType, clientVersion, loadWaitOnlineApplications);
    };

    return (
        <div>
            {applications.map((item) => (
                <Card key={item.appUuid} title={item.appName} hoverable bordered size="small" style={{ marginBottom: 10 }} bodyStyle={{ padding: 2 }}>
                    {item.ApplicationVersions.map((_item, index) => {
                        const renderOperate = (
                            <Space size={0}>
                                <Popconfirm
                                    placement="topRight"
                                    title="确认要删除该应用客户端版本吗?"
                                    okButtonProps={{ loading: state.submitLoading }}
                                    onConfirm={() => deleteApplicationTypeVersion(item, _item)}
                                >
                                    <Button theme="borderless" icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
                                </Popconfirm>

                                <Popconfirm
                                    placement="topRight"
                                    title={`确认要上线该应用客户端版本【开发环境】吗?`}
                                    okButtonProps={{ loading: submitLoading }}
                                    onConfirm={() => submitVersionOnline({ title: "开发环境", runEnv, url: BNTApplicationOperationCenterUrls[runEnv] }, item, _item)}
                                >
                                    <Button theme="borderless" icon={<IconGlobeStroke />} title={"上线到开发环境"}></Button>
                                </Popconfirm>
                            </Space>
                        );

                        return (
                            <Descriptions key={index} size="small" bordered column={2} labelStyle={{ width: 110 }} style={{ marginTop: 5, marginBottom: 5 }}>
                                <Descriptions.Item label="类型">{_item.apvType}</Descriptions.Item>
                                <Descriptions.Item label="发版人">{_item.apvPublisher.name}</Descriptions.Item>
                                <Descriptions.Item label="当前版本号">{_item.ApplicationType.appVeno}</Descriptions.Item>
                                <Descriptions.Item label="新版本号">
                                    <span style={{ fontSize: 16, color: "#f50" }}>{_item.apvVersion}</span>
                                </Descriptions.Item>
                                <Descriptions.Item label="发版时间">
                                    {_item.apvPubtime && (
                                        <Tooltip title={formatUTCTime(_item.apvPubtime, "YYYY年MM月DD日 HH:ss:mm")}>{format(formatUTCTime(_item.apvPubtime), "zh_CN")}</Tooltip>
                                    )}
                                </Descriptions.Item>
                                <Descriptions.Item label="代码大小">{_item.apvCodesize ? helper.byteConvert(parseInt(_item.apvCodesize)) : "-"}</Descriptions.Item>
                                <Descriptions.Item label="更新说明">
                                    {_item.apvDesc ? (
                                        <Tooltip title={_item.apvDesc}>
                                            <a onClick={() => editApplicationTypeVerionDesc(_item)}>
                                                <IconEyeOpened />
                                            </a>
                                        </Tooltip>
                                    ) : (
                                        <a onClick={() => editApplicationTypeVerionDesc(_item)}>添加发版说明</a>
                                    )}
                                </Descriptions.Item>
                                <Descriptions.Item label="操作">{renderOperate}</Descriptions.Item>
                            </Descriptions>
                        );
                    })}
                </Card>
            ))}
        </div>
    );
};

export default OrganizationApplications;
